// 逐行中文注释如下

// 导入React中的useEffect和useState钩子函数
import { useEffect, useState } from 'react';
// 导入文档上传组件
import DocumentUploader from './DocumentUploader';
// 导入文档查看组件
import DocumentViewer from './DocumentViewer';
// 导入获取文档列表的API和Document类型定义
import fetchDocuments, { type Document } from '../apis/fetchDocuments';

// 定义DocumentTools函数组件
const DocumentTools: React.FC = () => {
  // 定义refreshViewer状态，用于控制文档查看器是否需要刷新
  const [refreshViewer, setRefreshViewer] = useState(false);
  // 定义documentList状态，用于存储文档列表
  const [documentList, setDocumentList] = useState<Document[]>([]);

  // 组件首次挂载时，获取文档列表
  useEffect(() => {
    // 调用fetchDocuments获取文档数据
    fetchDocuments().then((documents) => {
      // 设置文档列表状态
      setDocumentList(documents);
    });
  }, []);

  // 当refreshViewer为true时，重新获取文档列表并重置refreshViewer
  useEffect(() => {
    // 判断refreshViewer是否为true
    if (refreshViewer) {
      // 重置refreshViewer为false
      setRefreshViewer(false);
      // 重新获取文档列表
      fetchDocuments().then((documents) => {
        // 更新文档列表状态
        setDocumentList(documents);
      });
    }
  }, [refreshViewer]);

  // 渲染上传组件和查看组件
  return (
    <div>
      {/* 渲染文档上传组件，并传递setRefreshViewer用于刷新文档列表 */}
      <DocumentUploader setRefreshViewer={setRefreshViewer} />
      {/* 渲染文档查看组件，并传递当前文档列表 */}
      <DocumentViewer documentList={documentList} />
    </div>
  );
};

// 导出DocumentTools组件，供其他模块使用
export default DocumentTools;
